<script setup lang="ts">
import { ref } from "vue";
import { Message } from '../../packages/index';
import BlockBox from "../BlockBox.vue";
const testJson = require('../../es-iconfont/iconfont.json');
const iconList = ref(testJson.glyphs)

const copyClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
        .then(function () {
            Message.success('复制成功');
        }, function () {
            Message.error('复制失败');
        });
}

//随机颜色
const getColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
<template>
    <BlockBox text="外部图标测试">
        <ul class="es-icon-list">
            <li v-for="item in iconList" @click="copyClipboard(item.font_class)">
                <span>
                    <es-tooltip :tooltip="item.name" position="top">
                        <es-icon :name="item.font_class" :color="getColor()" />
                    </es-tooltip>
                </span>
                <span class="copy-name">{{ item.font_class }}</span>
            </li>
        </ul>
    </BlockBox>
</template>
<style scoped lang="css">
.es-icon-title {
    margin-left: 10px;
    font-size: 22px;
    font-weight: 400;
    color: #1f2f3d;
}

.es-icon-list {
    width: 100%;
    padding: 0;
    color: #5e6d82;
    list-style: none;
    border: 1px solid #eaeefb;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
}

li {
    text-align: center;
    width: 16.66%;
    height: 120px;
    color: #666;
    font-size: 13px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

.copy-name {
    margin-top: 20px;
    user-select: none;
    color: #eee;
}
</style>
